<template>
  <div class="content" ref="content" style="height:100vh !important;">
    <!-- 信息展示 -->
    <div class="show center">
      <div class="message center color_white">
        <van-card
          :thumb="src"
        >
          <template #title>
            <van-contact-card type="edit" :name="userdata.username" :tel="userdata.mobile" :editable="false" />
          </template>
          <template #tags>
            <div style="margin-top:0.4rem">
              <van-tag plain v-show="userdata.role_name === '超级管理员' || userdata.role_name === '老板' " color="#82ccdd" style="margin-right:0.1rem">{{userdata.role_name}}</van-tag>
              <van-tag
                plain
                v-show="userdata.role_name === '照片审核主管' ||
                  userdata.role_name === '摄影组长' ||
                  userdata.role_name === '照片后期管理员' ||
                  userdata.role_name === '照片后期管理员'"
                color="#00b894"
                style="margin-right:0.1rem">
                  {{userdata.role_name}}
                </van-tag>
              <van-tag
                plain
                v-show="userdata.role_name === '人事经理' ||
                  userdata.role_name === '市场经理' ||
                  userdata.role_name === '行政助理' ||
                  userdata.role_name === 'CFO'"
                color="#fab1a0"
                style="margin-right:0.1rem">
                  {{userdata.role_name}}
                </van-tag>
                <van-tag
                plain
                v-show="userdata.role_name === '客户'"
                color="#a29bfe"
                style="margin-right:0.1rem">
                  {{userdata.role_name}}
                </van-tag>
              <van-tag
                v-show="userdata.role_name === '超级管理员' ||
                  userdata.role_name === '老板' ||
                  userdata.username === '南瓜影像工作室'"
                plain
                color="#f8c291">
                  VIP
                </van-tag>
            </div>
          </template>
        </van-card>
      </div>
    </div>
    <!-- 选项卡 -->
    <div class="list center">
      <div class="content">
        <div class="cell_border_box-shadow">
          <van-cell title="关于我们" is-link class="cell_border_radius_all"/>
        </div>
        <div class="cell_border_box-shadow">
          <van-cell title="基本信息" is-link class="cell_margin"/>
          <van-cell title="设置" is-link />
          <van-cell title="修改资料" is-link class="cell_border_radius"/>
        </div>
        <div class="cell_border_box-shadow">
          <van-button
            type="default"
            icon="close"
            block
            class="cell_border_radius_all cell_margin"
            style="color:#ff7675;border-color:#fff"
            @click="logOut"
            >
              退出系统
          </van-button>
        </div>
      </div>
    </div>
    <div class="footer center">
      <div>埃文CHAN工作室</div>
      <div>Copyright © 2020-2021 EVINCHAN</div>
    </div>
    <van-tabbar
      v-model="active"
      active-color="#409efe"
      inactive-color="#7d7e80"
      :placeholder="true"
      fixed>
      <van-tabbar-item
        name="library"
        to="library"
        :icon="active=='library'?'photo':'photo-o'"
        replace
      >
        图库
      </van-tabbar-item>
      <van-tabbar-item
        name="center"
        to="center"
        :icon="active=='center'?'manager':'manager-o'"
        replace
      >
        个人中心
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: require('@/assets/ng.jpg'),
      active: 'center',
      name: window.sessionStorage.getItem('username'),
      userdata: {},
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      }
    }
  },
  created() {
    // console.log(this.$refs['content'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取数据
    getData() {
      this.queryInfo.query = this.name
      this.$http.get(`/users`, {
        params: this.queryInfo
      }).then(res => {
        if (res.data.meta.status !== 200) {
          return this.$toast.fail('数据加载失败')
        }
        // console.log(res.data.data.users[0],"===用户数据");
        this.userdata = res.data.data.users[0]
      })
    },
    // 退出系统
    logOut() {
      window.sessionStorage.clear()
      window.sessionStorage.clear()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.content{
  background: #efefef;
  // height: 100%;
  .show{
    width: 100%;
    height: 5rem;
    background-image: linear-gradient(to top, rgba(85, 239, 196,0.2) 0%, rgba(0, 168, 255,0.3) 100%);
    // padding: .1rem;
    .message{
      margin-top: 1.5rem;
      width: 90%;
      height: 4.5rem;
      background: #fff !important;
      border-radius: .5rem;
      box-shadow-bottom:9px 9px 18px #e3e3e3,
             -9px -9px 18px #fbfbfb;
      .van-card{
        width: 100%;
        background: #fff !important;
      }
    }
  }
  .list{
    padding-bottom: 1rem;
    margin-top: 1rem;
    width: 100%;
    .content{
      width: 90%;
      .cell_margin{
        margin-top: 0.5rem;
        border-radius: 0.5rem 0.5rem 0 0;
        // background: #eeeeee;

      }
      .cell_border_radius{
        border-radius:0 0 0.5rem 0.5rem;
      }
      .cell_border_radius_all{
        border-radius:0.5rem;
      }
      .cell_border_box-shadow{
        box-shadow:9px 9px 18px #e3e3e3,
             -9px -9px 18px #fbfbfb;
        border-radius:0.5rem;
      }
    }
  }
  .footer{
    width: 100%;
    padding: 0.3rem 0;
    flex-direction: column;
    font-size: 0.3rem;
    color: #999;
    background: #efefef;
  }
  .van-tabbar{
  z-index: 200;
  position: absolute;
  bottom: 0;
  }
}

.color_white{
  background: #ffffff;
}
</style>
